<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="content">
    <input type="button" value="提交备忘录" id="submit">
    <ol id="ol">
        <li><input type="checkbox" class="all"><span class="text">全选</span>rhr</li>
        <li><input type="checkbox">254346</li>
    </ol>
    
</body>
<script>
    window.onload = function() {
        // content.onkeyup = inpFunc
    }

    // function inpFunc(){
    //     console.log(123);
    //     if(event.keyCode == 13){
    //         console.log(666);

    //         let val= content.value
    //         let ol = document.querySelector('ol')
    //         ol.innerHTML +=`
    //                         <li>${val}</li>
    //                         ` 
    //     }
        
    // }

     submit.addEventListener("click",function(){
            li=document.createElement("li");
            li.innerHTML=`<input type="checkbox" class="ck">${content.value}<button id='dele'>删除</button>`;
            ol.appendChild(li);
            content.value="";
        });
        ol.addEventListener("click",function(event){
            event.target.className=="choose"?
            event.target.className="":event.target.className="choose";
        })

        // 获取全选复选框
        let all = document.querySelector('.all')
        // 获取子复选框
        let cks = document.querySelectorAll('.ck')
        // 获取全选复选框文字
        let text = document.querySelector('.text')

        // 给全选复选框添加监听事件
        all.addEventListener('click', function () {
            // 选中状态与全选复选框的选中状态保持一致
            cks.forEach(function (ele, i) {
                ele.checked = all.checked
            })
            text.innerText = all.checked == true ? '取消全选' : '全选'
        })

        // 给全选复选框添加监听事件
        cks.forEach(function (ele, i) {
            ele.addEventListener('click', function () {
                let num = document.querySelectorAll('.ck:checked').length
                all.checked = num == cks.length ? true : false
                text.innerText = num == cks.length ? '取消全选' : '全选'
            })
        })





    
</script>
<style>
    
    .choose{
        color: #ccc;
    }
</style>
</html>